<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>一元夺宝商品详情页</title>
    <!-- 依赖的类库和插件 -->
    <link rel="stylesheet" href="/asset/plugins/swiper/swiper.min.css">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="../css/api.css">
    <link rel="stylesheet" href="../css/aui.2.0.css">
    <link rel="stylesheet" href="../css/common.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../css/product.css">
</head>
<body id="app">
    <!-- 顶部页头 start -->
    <div id="header" class="main-header">
        <header class="aui-bar aui-bar-nav goods-detail-header">
            <a id="back-index" class="aui-pull-left aui-btn">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
        </header>
    </div>
    <!-- 顶部页头 end -->
    <!-- 主要正文 start -->
    <div class="aui-content goods-detail">
        <div v-if="product_info.status == 1">
            <span class="tag"></span>
        </div>
        <!-- 商品相册轮播图 start -->
        <div class="swiper-container product-preview" id="swiper">
            <div class="swiper-wrapper" >
                <div class="swiper-slide" v-for="row in product_thumb"><img v-bind:src="product_thumb_path + row.img_name"></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <!-- 商品相册轮播图 end -->
        <div class="goods-title">
            <h3>{{ product_info.title }}</h3>
            <p>{{ product_info.subtitle }}</p>
        </div>
        <div v-if="product_info.status == 1">
            <div class="award">
                <div class="award-tag">获奖<br/>用户</div>
                <div class="award-content">
                    <div class="award-msg">
                        <img class="award-msg-img" src="" />
                        <div class="award-msg-font">
                            <p>用户昵称</p>
                            <p>参与人数：10</p>
                            <p>开奖时间：123</p>
                        </div>
                    </div>
                    <div class="award-num">
                        幸运号码：123456
                    </div>
                </div>
            </div>
            <div class="tips">
                {{ lang.com_lottery_history }}
            </div>
        </div>
        <div v-else>
            <div class="product-progress">
                <!--进度条-->
                <div class="progress_bar">
                    <div class="barline probar">
                        <div class="line gradient" percent="{{ product_info.sale_percent }}" number="0" style="width:0px;"></div>
                    </div>
                </div>
                <!--进度条--end-->
                <div class="aui-content">
                    <div class="aui-col-xs-4">
                        {{ lang.com_lottery_product_total }}
                        <span>{{ product_info.total }}</span>
                    </div>
                    <div class="aui-col-xs-4">
                        {{ lang.com_lottery_product_sale_total }}
                        <span>{{ product_info.sale_total }}</span>
                    </div>
                    <div class="aui-col-xs-4">
                        {{ lang.com_lottery_product_surplus_total }}
                        <span>{{ product_info.total - product_info.sale_total }}</span>
                    </div>
                </div>
            </div>
            <div class="partake">
                <span class="label">{{ lang.com_sale_number }}</span>
                <div class="partake-num">
                    <div class="minus" onclick="minusSub()"> <i class="aui-iconfont aui-icon-minus"></i></div>
                    <input class="goods-num" type="text" value="1" readonly="readonly" min="1" max="{{ product_info.limit_total }}">
                    <div class="plus" onclick="addSub()"> <i class="aui-iconfont aui-icon-plus"></i></div>
                </div>
                <!--<span class="tips">加大参与人次，抢宝在望</span>-->
            </div>
            <div class="product-buy">
                <button id="button-buy" class="aui-btn aui-btn-block aui-btn-sm buy-btn">{{ lang.com_buy }}</button>
            </div>
        </div>
        <ul class="aui-list aui-list-in detail-nav">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title" id="open-product-content">{{ lang.com_lottery_product_content }}</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">{{ lang.com_lottery_history }}</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">{{ lang.com_lottery_member_log }}</div>
                </div>
            </li>
        </ul>
    </div>
    <div class="advert">
        {{ lang.com_go_slogan }}
        <button class="aui-btn">{{ lang.com_go }}</button>
    </div>
    <!-- 主要正文 end -->
</body>
<!-- 依赖的类库和插件 -->
<script type="text/javascript" src="/asset/vue.js"></script>
<script type="text/javascript" src="/asset/jquery/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="/asset/plugins/swiper/swiper.min.js"></script>
<!-- 公共脚本 -->
<script type="text/javascript" src="../config/app.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-range.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<!-- 数据模型 -->
<script type="text/javascript" src="../model/product.js"></script>
</html>
